<template>
    <div>
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 爬取任务
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container v2-group">
            <div>
                <div class="ms-title primary">
                    修改密码
                </div>
                <el-form :model="param" :rules="rules" ref="resetpwd" label-width="110px" class="ms-content">
                    <el-form-item prop="username" label="用户名">
                        <el-input v-model="param.username" placeholder="username" disabled>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password" label="旧密码">
                        <el-input
                            type="password"
                            placeholder="请输入旧密码"
                            v-model="param.password"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="newpassword" label="新密码">
                        <el-input
                            type="password"
                            placeholder="请输入新密码"
                            v-model="param.newpassword"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="confirmpassword" label="确认新密码">
                        <el-input
                            type="password"
                            placeholder="请再次输入新密码"
                            v-model="param.confirmpassword"
                        >
                        </el-input>
                    </el-form-item>
                    <div class="login-btn">
                        <el-button type="primary" @click="submitForm()">修改密码</el-button>
                    </div>
                    <!-- <p class="login-tips">Tips : 用户名和密码随便填。</p> -->
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import api from '../../../api/index';

export default {
    data: function() {
        return {
            param: {
                username: 'admin',
                password: '',
                newpassword: '',
                confirmpassword: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
                newpassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
                confirmpassword: [{ required: true, message: '请再次输入新密码', trigger: 'blur' }]
            },
        };
    },
    mounted() {
        this.param.username = localStorage.getItem('ms_username');
    },
    methods: {
        submitForm() {
            this.$refs.resetpwd.validate(valid => {
                if (valid) {
                    if (this.param.newpassword !== this.param.confirmpassword) {
                        this.$message.error('两次输入的新密码不一致');
                        return;
                    }
                    // this.$message.success('登录成功');
                    // localStorage.setItem('ms_username', this.param.username);
                    // this.$router.push('/');
                    api.updateUserPassword({oldPassword: this.param.password, newPassword: this.param.newpassword, newPassword1: this.param.confirmpassword}).then(res => {
                        console.log(res);
                        this.$message.success('新密码设置成功');
                        this.$router.push('/');
                    }).catch(err => {
                        this.$message.error(err);
                    });
                }
            });
        },
    },
};
</script>

<style scoped>
    /* background-image: url(../../assets/v2/images/mbg.jpg); */
#particles {
    position: absolute;
    width:100%;
    height:100%;
    overflow:hidden;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.container > div {
    width: 50vw;
}
.login-wrap {
    position: relative;
    width: 100%;
    height: calc(100vh - 20px);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ms-title {
    /* width: 50vw; */
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    border-bottom: 1px solid #ddd;
}
.ms-login {
    left: 50%;
    top: 50%;
    width: 350px;
    height: 310px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 1);
    overflow: hidden;
    text-align: center;
    z-index: 1;
}
.ms-content {
    padding: 30px 30px;
}
.login-btn {
    text-align: center;
}
.login-btn button {
    width: 100%;
    height: 36px;
    margin-bottom: 10px;
}
.login-tips {
    font-size: 12px;
    line-height: 30px;
    color: #fff;
}
.el-image {
    width: 40%;
}
</style>